<template lang="">
  <div>
    <div class="two_my_bidding">
      <el-alert
      style="margin-bottom: 20px;"
        title="提醒：如果资料有变更,请联系富妹修改!"
        type="warning">
      </el-alert>
      <div v-show="perfectOrNot">
        <div class="two_my_bidding_content">
          <div class="announcement">
            <img class="announcement_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E5%85%AC%E5%91%8A%E8%AF%A6%E6%83%85/u1344.svg">
            <span>企业信息</span>
            <img v-show="attestation" style="position: relative;float: right;right:30%;"
            src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E8%B5%84%E6%96%99%EF%BC%88%E5%B7%B2%E5%AE%8C%E5%96%84%EF%BC%89/u4712.png">
          </div>
          <div style="float: left;">
            <div class="enterprise_name">
              <span>企业名称</span>
            </div>
            <div class="enterprise_name_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="enterprise_business_license">
              <span>企业营业执照</span>
            </div>
            <div class="enterprise_name_content">
              <span style="margin-left: 30px;color: #31A9F0;" @click="preview">预览</span>
            </div>
          </div>
          <div style="float: left;">
            <div class="company_mailbox">
              <span>公司邮箱</span>
            </div>
            <div class="company_mailbox_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="corporate_account">
              <span>传真</span>
            </div>
            <div class="corporate_account_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
          </div>
          <div style="float: left;">
            <div class="company_mailbox">
              <span>对公开户行</span>
            </div>
            <div class="company_mailbox_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="corporate_account">
              <span>对公账号</span>
            </div>
            <div class="corporate_account_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
          </div>
          <div style="float: left;">
            <div class="company_mailbox">
              <span>开票抬头</span>
            </div>
            <div class="company_mailbox_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="corporate_account">
              <span>开票地址</span>
            </div>
            <div class="corporate_account_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
          </div>
          <div style="float: left;">
            <div class="company_mailbox">
              <span>税号</span>
            </div>
            <div class="company_mailbox_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="corporate_account">
              <span>公司地址</span>
            </div>
            <div class="corporate_account_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
          </div>
        </div>
        <div class="two_my_bidding_content">
          <div class="announcement">
            <img class="announcement_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E5%85%AC%E5%91%8A%E8%AF%A6%E6%83%85/u1344.svg">
            <span>个人信息</span>
          </div>
          <div style="float: left;">
            <div class="enterprise_name">
              <span>联系人</span>
            </div>
            <div class="enterprise_name_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="enterprise_business_license">
              <span>身份证件</span>
            </div>
            <div class="enterprise_name_content">
              <span style="margin-left: 30px;color: #31A9F0;" @click="preview">预览</span>
            </div>
          </div>
          <div style="float: left;">
            <div class="company_mailbox">
              <span>联系方式</span>
            </div>
            <div class="company_mailbox_content">
              <span style="margin-left: 30px;">{{}}</span>
            </div>
            <div class="corporate_account">
              <span>授权委托书</span>
            </div>
            <div class="corporate_account_content">
              <span style="margin-left: 30px;color: #31A9F0;">下载</span>
            </div>
          </div>
        </div>
      </div>
      <div class="not_certified" v-show="!perfectOrNot">
        <div v-show="whetherToSubmit" class="not_certified_information">
          <div class="not_certified_information_img">
            <img style="width: 200px;height: 200px;margin-top: 50px;"
            src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E8%B5%84%E6%96%99%EF%BC%88%E6%9C%AA%E5%AE%8C%E5%96%84%EF%BC%89/u4825.png">
          </div>
          <div class="not_certified_information_content">
            <p style="font-size: 28px;margin-top: 120px;">抱歉，该账户还未实名认证，访问受限!</p>
            <p style="margin-top: 30px;">由于您还没有实名认证，很多功能被限制使用，请先提交资料审核，完善资料后访问权限开通!</p>
            <p style="font-size: 14px;color: #317EE7;margin-top:30px;">
              <span style="margin-right: 50px;" @click="improvePersonalInformation">个人用户资料提交</span>
              <span @click="improveEnterpriseInformation">企业用户资料提交</span>
            </p>
          </div>
        </div>
        <div v-show="!whetherToSubmit" class="not_certified_information">
          <div class="not_certified_information_img">
            <img style="width: 200px;height: 200px;margin-top: 50px;"
            src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E8%B5%84%E6%96%99%EF%BC%88%E6%9C%AA%E5%AE%8C%E5%96%84%EF%BC%89/u4825.png">
          </div>
          <div class="not_certified_information_content">
            <p style="font-size: 28px;margin-top: 120px;">您的资料正在努力审核中，请耐心等待!</p>
            <p style="margin-top: 30px;">由于您还没有实名认证，很多功能被限制使用，请先提交资料审核，完善资料后访问权限开通!</p>
          </div>
        </div>
        <!-- <div  class="not_certified_img">
          <img src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E8%B5%84%E6%96%99%EF%BC%88%E6%9C%AA%E5%AE%8C%E5%96%84%EF%BC%89/u4820.svg">
          <img class="not_certified_small_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u600.png">
          <p class="not_certified_p">联系富妹开通权限(周一至周六8:30-18：00)</p>
        </div> -->
      </div>
    </div>
    <el-dialog
      title="资料查看"
      width="30%"
      :visible.sync="dataViewing"
      append-to-body>
      <div style="width: 100%;">
        <img style="width: 100%;height:400px;"
        src="https://img2.baidu.com/it/u=1188197205,1733881700&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=719">
      </div>
    </el-dialog>
    <el-dialog
      title="个人资料填写"
      width="40%"
      :visible.sync="innerVisible"
      append-to-body>
      <div style="width: 100%;">
        <el-form ref="form" :model="form" label-width="80px" style="margin-top:50px;height:350px;">
          <el-form-item label="姓名">
            <el-input style="width: 60%;" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-text="form.name"></el-input>
          </el-form-item>
          <el-form-item label="身份证">
            <span style="margin-right: 150px;margin-left:40px;">正面</span>
            <span>反面</span>
          </el-form-item>
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            style="float: left;">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            style="float: left;">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form>
        <div style="border-top: 1px solid black;width:761.19px;margin-left:-20px;"></div>
        <div style="margin-top: 20px;text-align:center;width: 100%;">
          <el-button type="info" style="background-color:#CCCCCC;border: none;width: 160px;height: 45px;">确认提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="企业资料填写"
      width="40%"
      :visible.sync="innerVisible1"
      append-to-body>
      <div style="width: 100%;">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="公司名称">
            <el-input style="width: 60%;" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="公司电话">
            <el-input style="width: 60%;" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="营业执照">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              style="float: left;">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="对公开开户行">
            <el-input style="width: 60%;" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input style="width: 60%;" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <!--一级分类-->
            <el-select
              v-model="form.subjectParentId"
              placeholder="请选择省" style="margin-right: 20px;width: 182px;">
              <el-option
                v-for="subject in form"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
          <!-- 二级分类 -->
          <el-select v-model="form.subjectId" placeholder="请选择市" style="width: 182px;">
            <el-option
              v-for="subject in form"
              :key="subject.value"
              :label="subject.title"
              :value="subject.id"/>
            </el-select>
            <el-input style="width: 60%;margin-top: 10px;" v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <div style="border-top: 1px solid black;width:761.19px;margin-left:-20px;"></div>
        <div style="margin-top: 20px;text-align:center;width: 100%;">
          <el-button type="info" style="background-color:#CCCCCC;border: none;width: 160px;height: 45px;">确认提交</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageUrl: '', // 图片上传
      form: {}, // 个人资料填写表单内容
      innerVisible1: false, // 企业资料填写弹窗
      innerVisible: false, // 个人资料填写弹窗
      whetherToSubmit: false, // 判断是否提交申请
      dataViewing: false, // 判断是否预览信息
      attestation: true, // 判断是否为证
      perfectOrNot: true // 判断是否实名认证
    }
  },
  mounted () {
  },
  methods: {
    improveEnterpriseInformation () { // 完善企业资料信息弹窗
      this.innerVisible1 = true
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    improvePersonalInformation () { // 完善个人资料信息弹窗
      this.innerVisible = true
    },
    preview () { // 点击预览弹窗预览信息
      this.dataViewing = true
    }
  }
}
</script>
<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    float: left;
    margin-left: 80px;
    font-size: 78px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #fff;
    border:1px dashed black;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /deep/.el-dialog__header {
    padding: 10px 20px 10px;
    border-bottom: 1px  solid grey;
  }
  .not_certified_information_content{
    height: 300px;
    width: 70%;
    float: left;
  }
  .not_certified_information_img{
    float: left;
    text-align: center;
    width: 30%;
    height: 300px;
  }
  .not_certified_small_img{
    width: 90px;
    height: 90px;
    position: relative;
    left: -155px;
    top: -62px;
  }
  .not_certified_p{
    font-size: 12px;
    color: grey;
  }
  .not_certified_img{
    margin-left: 580px;
    margin-top: 40px;
  }
  .not_certified_information{
    width: 70%;
    height: 300px;
    background-color: #F2F2F2;
    margin-top: 70px;
    margin-left: 130px;
  }
  .not_certified{
    width: 100%;
  }
  .company_mailbox_content{
    width: 500px;
    height: 50px;
    background-color: #fff;
    font-size: 14px;
    line-height: 50px;
    float: left;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  .enterprise_name_content{
    width: 500px;
    height: 50px;
    background-color: #fff;
    font-size: 14px;
    line-height: 50px;
    float: left;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
  .corporate_account_content{
    width: 500px;
    height: 50px;
    background-color: #fff;
    font-size: 14px;
    line-height: 50px;
    float: left;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  .corporate_account{
    width: 160px;
    height: 50px;
    background-color: #F2F2F2;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    float: left;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  .enterprise_business_license{
    width: 160px;
    height: 50px;
    background-color: #F2F2F2;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    float: left;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
  .company_mailbox{
    width: 160px;
    height: 50px;
    background-color: #F2F2F2;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    float: left;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  .enterprise_name{
    width: 160px;
    height: 50px;
    background-color: #F2F2F2;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    float: left;
    border: 1px solid black;
  }
  .announcement_img{
    margin-right: 10px;
    transform: rotate(90deg);
  }
  .announcement{
    margin-bottom: 30px;
    margin-left: -20px;
  }
  .two_my_bidding_content{
    margin-bottom: 30px;
    float: left;
    margin-left: 10px;
    text-align: left;
    width: 99%;
  }
  .two_my_bidding_title{
    line-height: 100px;
    width: 100%;
    height: 100px;
  }
</style>
